<template>
	<view class="dispose-chart">
		<qiun-data-charts type="area" canvas2d="true" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		defineProps,
		watch
	} from 'vue'
	let chartData = ref({})
	let props = defineProps({
		data2: {
			type: Object,
			default: 'sb'
		},

	})

	watch(() => props.data2, (newData) => {
		let res = {
			categories: newData.date,
			series: [{
					name: "更换量",
					data: newData.data,
				},

			],

		};
		chartData.value = JSON.parse(JSON.stringify(res))
	})
	let opts = ref({
		color: ["#0066FF", ],
		padding: [20, 10, 10, 15], //上右下左
		enableScroll: false,
		legend: {
			show: false,
		},
		xAxis: {
			gridColor: '#ccc', //x刻度的颜色
			calibration: true,
			lineHeight: '22', //x坐标轴值，离图标的距离
			disableGrid: true
		},
		yAxis: {
			disableGrid: true, //不绘制横向向网格(即默认绘制网格)
			gridType: "curve",
			dashLength: 2,
			gridType: 'solid',
			fontSize: '18'

		},
		extra: {
			tooltip: {
				splitLine: false,
				legendShow: false
			},
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			},
			area: {
				type: "curve",
				opacity: 0.3,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: "hollow"
			}

		}
	})
</script>

<style scoped lang="scss">
	.dispose-chart {
		width: 100%;
		height: 100%;
	}
</style>